<template>
  <div :class="`${PREFIX}`">
    <div :class="`${PREFIX}-inner`">
      <img src="../assets/img/logo1.jpg" alt="" />
      <div class="spans">
        <span @click="msg">资讯</span>
        <span @click="vip">会员</span>
        <span @click="about">关于</span>
      </div>
    </div>
  </div>
</template>
<script setup>
const PREFIX = "header";
import { useRouter } from "vue-router";
const router = useRouter();
const about = () => {
  router.push({ name: "page4" });
};
const vip = () => {
  router.push({ name: "page5" });
};
const msg = () => {
  router.push({ name: "page6" });
}
</script>
<style lang="less">
.header {
  width: 100%;
  height: 60px;
  background: #7355ff;
  display: flex;
  &-inner {
    margin: 0 auto;
    display: flex;
    width: 1400px;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    font-size: 18.76px;

    & > img {
      width: 157px;
      height: 50px;
    }
    .spans {
      & > span {
        &:not(:first-child) {
          margin-left: 24px;
        }
        cursor: default;
      }
    }
  }
}
</style>
